<template>
    <div class="page-container">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="Username">
                <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="Address">
                <el-input v-model="form.address" />
            </el-form-item>
            <el-form-item label="PhoneNumber">
                <el-input v-model="form.phonenumber" />
            </el-form-item>
            <el-form-item style="margin-right: 0;">
                <el-button type="primary" size="small" @click="onSubmit">Query</el-button>
                <el-button type="warning" size="small" @click="onReset">Reset</el-button>
                <!-- <el-button type="danger" size="small" @click="onDelete">Delete</el-button> -->
            </el-form-item>
        </el-form>
        <el-table ref="multipleTableRef" fit :data="tableData" :tree-props="treeProps" row-key="id" default-expand-all @selection-change="onSelectChange">
            <el-table-column fixed type="selection" width="55" />
            <el-table-column fixed prop="index" label="No" width="80" />
            <el-table-column prop="username" label="Username" />
            <el-table-column prop="phoneNumber" label="PhoneNumber" />
            <el-table-column prop="phoneNumber2" label="PhoneNumber2" />
            <el-table-column fixed="right" prop="address" label="Address" />
            <!-- <el-table-column fixed="right" label="Operations" min-width="100">
                <template #default="scope">
                    <el-button type="danger" size="small">
                        Delete
                    </el-button>
                </template>
</el-table-column> -->
        </el-table>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const selectItems = ref([])
const multipleTableRef = ref()
const tableData = ref([
    {
        username: 'kevin ***',
        phoneNumber: '087561****',
        phoneNumber2: '01657****',
        address: 'Dublin.Dublin2.****',
        id: 1,
        index: 1,
        children: [
            {
                username: 'kevin ***',
                phoneNumber: '087561****',
                phoneNumber2: '01657****',
                address: 'Dublin3.Dublin4.****',
                id: 11,
                index: 2
            }
        ]
    },
    {
        username: 'Mark ***',
        phoneNumber: '083125****',
        phoneNumber2: '01758****',
        address: 'Cork.CorkCity.****',
        id: 2,
        children: [],
        index: 3
    },
])
const treeProps = reactive({
    checkStrictly: false,
})
const form = reactive({
    username: '',
    address: '',
    phonenumber: ''
})
const onReset = () => {
    form.username = ''
    form.address = '',
        form.phonenumber = ''
}
const onSubmit = () => {

}
const onDelete = () => {
    if (selectItems.length === 0) {
        ElMessage.error('plaese select users')
        return
    }
    ElMessage.success('deleting...')
    selectItems.value = []
    if (multipleTableRef.value) {
        multipleTableRef.value.clearSelection()
    }
}
const onSelectChange = (data) => {
    selectItems.value = data
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
    border-bottom: none;
    margin-bottom: 10px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    .el-form-item {
        margin-right: 15px;

        :deep(.el-form-item__label) {
            color: #606266;
        }
    }

    .el-button {
        margin-left: 10px;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    }
}

.demo-form-inline .rangePicker .el-range-input {
    width: 100px;
}

.demo-form-inline {
    :deep(.el-input__wrapper) {
        width: auto;

        .el-range-input {
            width: 120px;
        }
    }
}

.el-table {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    :deep(th.el-table__cell) {
        background-color: #f8f9fa;
    }

    :deep(.el-table__row--hover) {
        background-color: #f8fafc !important;
    }

    .el-button {
        padding: 6px 10px;
        border-radius: 4px;
    }
}

.demo-form-inline .rangePicker .el-range-input {
    width: 100px;

}

.demo-form-inline {
    :deep(.el-input__wrapper) {
        width: auto;

        .el-range-input {
            width: 120px;
        }
    }
}

.demo-form-inline .el-input {
    --el-input-width: 150px;
}

.demo-form-inline .el-select {
    --el-select-width: 150px;
}
</style>